<template>
	<div class="rightcontainer">
		<div class="rightmain">
			<div class="title">考试信息</div>
			<div class="table">
				<div class="row">
					<div class="cell f1">序 号</div>
					<div class="cell f3">考试名称</div>
					<div class="cell f2">报考状态</div>
					<div class="cell f2">操 作</div>
				</div>
				<div class="row" v-for="(item,index) in list">
					<div class="cell f1">{{(index+1)}}</div>
					<div class="cell f3 fl">{{item.examName}}</div>
					<div class="cell f2 fl">{{item.reviewStatus==0?'未报考':(item.reviewStatus==1?'已填写保存':(item.reviewStatus==2?'已提交审核':(item.reviewStatus==3?'审核成功':(item.reviewStatus==4?'审核失败':(item.reviewStatus==5?'已完结':'')))))}}</div>
					<div class="cell f2">
						<template v-if="item.ifInTime=='0'">
							<el-button type="primary" v-if="item.reviewStatus==0" @click="tojoin(item.id)">立刻报名</el-button>
							<el-button type="primary" v-else-if="item.reviewStatus==1" @click="toaudit(item.id)">提交审核</el-button>
							<el-button type="primary" v-else-if="item.reviewStatus>1" @click="toaudit(item.id)">查看详情</el-button>
						</template>
						<template v-else>
							<el-button type="info" disabled>考试过期</el-button>
						</template>
					</div>
				</div>
			</div>
			<div id="page">
				<page-box :key="pagination.page" :page="pagination.page" :totals="total"
					@current-change="changepage" :pageSize="pagination.pageSize" :tab="false"></page-box>
			</div>
		</div>
	</div>
</template>

<script>
	import PageBox from "../../components/page.vue";
	export default {
		components: {
			PageBox
		},
		data() {
			return {
				list:[],
				total: null,
				pagination: {
					page: 1,
					pageSize: 10,
				},
			};
		},
		computed: {
		},
		mounted() {
			this.getexamlist()
		},
	
		methods: {
			changepage(item) {
				this.pagination.pageSize = item.pageSize;
				this.pagination.page = item.currentPage;
				this.getexamlist();
			},
			async getexamlist(){
				var res=await this.$api.Join.Getexamlist(this.pagination)
				this.total=res.total
				this.list=res.data.items
				// this.list=res.data.items.filter((item,index)=>{
				// 	return item.examType!='0'
				// })
			},
			tojoin(id){
				this.$router.push({ name: 'Chengnuo',query:{id}})
			},
			toaudit(id){
				this.$router.push({ name: 'Joinfo', query:{id}})
			},
		},
	};
</script>

<style lang="less" scoped>
	.rightcontainer {
		width: 920px;
		margin:0 auto 40px;
		overflow: hidden;

		.rightmain {
			width: 100%;
			margin: 20px 0;

			.title {
				color: #134B9F;
				font-size: 20px;
				line-height: 18px;
				font-weight: bold;
				padding-bottom: 9px;
				border-bottom: 2px solid #134B9F;
				display: inline-block;
				letter-spacing: 2px;
			}
			#page {
				width: 100%;
				margin-top: 30px;
				display: flex;
				justify-content: center;
			}
			.table {
				border-left: 2px solid #ccc;
				border-top: 2px solid #ccc;
				width: 100%;
				margin-top: 16px;
				font-size: 18px;
				color:#666;
				.row{
					display: flex;
					flex-direction: row;
					width: 100%;
					height:55px;
					.cell {
						border-right: 2px solid #ccc;
						border-bottom: 2px solid #ccc;
						display: flex;
						justify-content: center;
						align-items: center;
						padding-left:10px;
						padding-right:10px;
					}
					.fl{
						
						box-sizing: border-box;
						justify-content: flex-start !important;
					}
					.f1{
						flex:1;
					}
					.f2{
						flex:2;
					}
					.f3{
						flex:3;
					}
				}
				
			}
		}
	}
</style>
